<template>
  <div class="message-content" v-if="dataObj?.that_nickname != undefined">
    <div class="content-hearder">
      <div v-if="!dataObj.that_notes">
        {{ dataObj.that_nickname }}
      </div>
      <div v-else>{{ dataObj.that_notes }}</div>
    </div>
    <div class="content-body" ref="content">
      <div
        class="body-box"
        v-for="item in contentone"
        :key="item.msg_id"
        :style="{
          justifyContent:
            item.send_id == dataObj.that_id ? 'flex-start' : 'flex-end',
        }"
      >
        <div class="body-left" v-if="item.send_id == dataObj.that_id">
          <img
            style="width: 35px; height: 35px; border-radius: 50%"
            :src="dataObj.that_avater"
            alt=""
          />
          <div
            style="
              margin: 5px 0 0 10px;
              background: rgb(0, 153, 255);
              color: #fff;
              padding: 10px;
              box-sizing: border-box;
              border-radius: 10px;
              max-width: 350px;
              word-break: break-all;
            "
          >
            {{ item.send_content }}
          </div>
        </div>
        <div class="body-right" v-else>
          <div
            style="
              margin: 5px 10px 0 0;
              background: rgb(0, 153, 255);
              color: #fff;
              padding: 10px;
              border-radius: 10px;
              max-width: 350px;
              box-sizing: border-box;
              word-break: break-all;
            "
          >
            {{ item.send_content }}
          </div>
          <img
            style="width: 35px; height: 35px; border-radius: 50%"
            :src="avatar"
            alt=""
          />
          <div
            style="
              font-size: 10px;
              position: absolute;
              right: -15px;
              top: -15px;
            "
          ></div>
        </div>
      </div>
    </div>
    <div class="content-footer">
      <textarea
        style="
          width: 100%;
          height: 100%;
          resize: none;
          border: none;
          outline: none;
        "
        v-model="content"
      ></textarea>
      <el-button class="send" type="primary" @click="send">发送</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataObj: {
      type: Object,
      default: () => { }
    },
    contentone: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      avatar: '',
      content: '',
      nickname: ''
    }
  },
  mounted() {
    this.avatar = localStorage.getItem('avatar')
    this.nickname = localStorage.getItem("nickname")
    this.$nextTick(() => {
      if (this.dataObj.that_nickname != undefined) {
        if (this.$refs.content) {
          this.$refs.content.scrollTop = this.$refs.content.scrollHeight
        }
      }
    })
  },
  watch: {
    contentone() {
      this.$nextTick(() => {
        this.$refs.content.scrollTop = this.$refs.content.scrollHeight
      })
    }
  },
  methods: {
    send() {
      this.$emit('send', {
        content: this.content,
        thatid: this.dataObj.that_id,
      })
      this.content = ''
    }
  },
}
</script>

<style lang="scss" scoped>
.message-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  .content-hearder {
    width: 100%;
    height: 64px;
    background: #f5f5f5;
    border-radius: 0 20px 0 0;
    display: flex;
    align-items: center;
    padding: 20px;
  }
  .content-body {
    flex: 1;
    padding: 20px 20px 0 20px;
    overflow-y: auto;
    .body-box {
      width: 100%;
      margin-bottom: 20px;
      position: relative;
      display: flex;
      // flex-direction: column;
    }
    .body-left {
      display: flex;
      // position: absolute;
      // left: 5px;
      float: left;
      align-items: center;
    }
    .body-right {
      display: flex;
      // position: absolute;
      // right: 5px;
      float: right;
      align-items: center;
    }
  }
  .content-footer {
    width: 100%;
    height: 250px;
    border-top: 2px solid #f5f5f5;
    padding: 10px 20px;
    font-size: 24px;
    position: relative;
    .send {
      position: absolute;
      right: 20px;
      bottom: 20px;
    }
  }
  .peo-nohave {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>